<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML元素练习2</title>
    <style>
      span {
        background-color: #e2e6c0;
        border-radius: 4px;
        padding: 0 0.5em;
      }

    </style>
  </head>

  <body>
    <h1>HTML元素练习</h1>
    <div>
      <h2>内容组织相关元素</h2>
      <p>p用来标记段落。</p>
      <p>常用的内容组织相关元素有：</p>
      <ul>
        <li>p</li>
        <li>ul</li>
        <li>li</li>
        <li>ol</li>
        <li>div</li>
      </ul>
    </div>
    <div>
      <h2>文本语义元素</h2>
      <p>常用的文本语义元素有：<span>a</span>、<span>br</span>、<span>span</span>等</p>
      <p>a元素用来标记超级链接，例如：<a href="http://hao.yangzh.cn/textbook-interactive-design/">互动媒体设计</a></p>
    </div>
    <div>
      <h2>嵌入内容元素</h2>
      <p>常用的嵌入内容元素有：<span>img</span>、<span>iframe</span>、<span>video</span>、<span>audio</span>、<span>svg</span>等等。</p>
      <p><img src="https://oss-yangjh.oss-cn-chengdu.aliyuncs.com/images/design-flow.png" alt="" width="400px"></p>
      <p><img src="images/20230313115651.png" alt="" width="400px"></p>
      <iframe src="//player.bilibili.com/player.html?aid=527418478&bvid=BV1pM411K7r8&cid=1093863617&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="400px" height="300px">
      </iframe>
      <video
        src="https://images-tv.adobe.com/mpcv3/4851/5c7fd358-70a2-4beb-9b62-846519fc7eea_1633994483.960x540at1200_h264.mp4"
        controls width="400px" height="300px"></video>
      <svg class="icon" style="width: 10em;height: 10em;vertical-align: middle;fill: currentColor;overflow: hidden;"
        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="512">
        <path
          d="M412.885333 89.322667a10.666667 10.666667 0 0 0-13.824 11.52c9.770667 76.373333 3.541333 149.013333-18.688 225.130666-11.669333 26.346667-32.042667 46.016-58.069333 64.576-15.296 10.88-32.170667 21.141333-50.282667 32.149334l-11.093333 6.762666c-22.144 13.525333-45.568 28.309333-68.48 46.186667-146.538667 114.325333-127.893333 297.642667-33.152 382.805333 64.448 57.92 138.453333 53.205333 180.949333 50.496 3.882667-0.234667 7.509333-0.469333 10.837334-0.64 33.728 17.173333 74.986667 26.88 123.626666 26.88 63.637333 0 120.618667-6.912 167.338667-26.666666 4.48 0.298667 9.472 0.768 14.954667 1.28 44.501333 4.117333 120.768 11.178667 201.728-38.912 49.706667-30.741333 80.96-101.077333 81.002666-173.824 0.064-73.472-31.573333-151.957333-110.890666-199.381334-95.573333-57.130667-159.082667-119.786667-171.541334-213.973333a10.666667 10.666667 0 0 0-8.234666-9.002667l-63.616-14.378666c1.322667-11.413333 2.773333-22.741333 4.202666-33.792l0.149334-1.130667c3.264-25.173333 6.357333-49.173333 7.146666-68.778667a10.666667 10.666667 0 0 0-7.402666-10.581333l-176.64-56.746667z m-1.749333 204.608l-0.384-0.042667c13.504-59.690667 17.386667-118.357333 11.349333-179.2l153.088 49.152c-1.152 17.109333-3.776 37.397333-6.634666 59.584l-0.042667 0.384c-3.328 25.706667-6.933333 53.717333-8.64 81.024-1.706667 27.285333-1.557333 54.421333 2.816 78.421333 4.373333 23.936 13.162667 45.824 29.653333 61.333334 39.402667 36.970667 82.88 82.581333 113.856 133.248 30.997333 50.666667 48.874667 105.344 38.890667 161.002666-12.544 69.909333-43.818667 112.938667-89.002667 138.965334-45.845333 26.410667-107.285333 36.053333-181.376 36.053333-107.392 0-172.501333-49.92-199.68-119.765333-27.52-70.72-17.002667-164.010667 32.32-251.050667 42.410667-74.837333 73.557333-143.296 93.098667-209.706667 5.077333-11.776 8.746667-24.810667 10.666667-39.402666z m-76.458667 113.984c8.448-6.016 16.512-12.288 24.042667-18.965334-17.92 45.568-41.258667 92.949333-69.930667 143.573334-51.626667 91.114667-64.042667 191.189333-33.642666 269.312 13.397333 34.432 34.986667 64.213333 64.597333 86.826666-41.642667 1.6-96.725333-1.642667-146.176-46.08-85.162667-76.565333-103.744-244.202667 32-350.101333 21.909333-17.109333 44.48-31.36 66.474667-44.821333l10.858666-6.613334c18.112-10.986667 35.797333-21.76 51.776-33.130666z m248.469334-126.229334l54.08 12.224c16.064 99.797333 85.546667 165.248 180.672 222.08 71.744 42.88 100.565333 113.706667 100.501333 181.056-0.042667 68.053333-29.44 130.069333-70.890667 155.712-65.429333 40.490667-126.378667 40.554667-170.581333 37.248 45.76-30.058667 76.586667-77.290667 89.173333-147.413333 11.242667-62.72-9.216-122.794667-41.706666-175.893333-32.469333-53.077333-77.568-100.245333-117.44-137.685334-11.882667-11.157333-19.328-28.010667-23.274667-49.6-3.925333-21.525333-4.181333-46.698667-2.517333-73.237333 0.512-8.106667 1.194667-16.298667 1.984-24.490667z m35.541333 498.346667c4.714667-2.794667 10.112-8.917333 15.018667-18.581333 4.842667-9.493333 8.768-21.525333 11.029333-34.794667 4.522667-26.730667 1.984-56.704-11.498667-79.658667l17.130667-12.48c16.981333 28.928 19.477333 65.066667 14.293333 95.658667a147.925333 147.925333 0 0 1-13.312 41.792c-5.973333 11.754667-13.866667 22.016-23.424 27.669333l-9.237333-19.626666z"
          p-id="513"></path>
      </svg>
    </div>
    <div>
      <h2>表格元素</h2>
      <p>常用的表格元素有：table、tr、td、th等。</p>
      <table border="1">
        <tr>
          <th>表头1</th>
          <th>表头2</th>
          <th>表头2</th>
        </tr>
        <tr>
          <td>单元格</td>
          <td>单元格</td>
          <td>单元格</td>
        </tr>
        <tr>
          <td>单元格</td>
          <td>单元格</td>
          <td>单元格</td>
        </tr>
      </table>
    </div>
    <div>
      <h2>表单元素</h2>
      <p>常用的表单元素有：form、input、button等等。</p>
      <form action="http://www.bing.com/search" method="get">
        <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
      </form>
      <form action="https://search.bilibili.com/all" method="get">
        <br>
        <label>B站: <input type="search" name="keyword"></label> <input type="submit" value="Search...">
      </form>
    </div>
  </body>

</html>
